<template>
    <div class="backer-item-container">
        <div class="backerLayout">
           <div class="left-container">
               <div class="commentLayout-avatar">
                   <div class="commentAvatar" :style="getProfileImage(backerItem.userId)"></div>
                   <div class="commentInfo">
                       <p class="commentLayout-account">{{getUserNameById(backerItem.userId)}}{{userName}}</p>
                       <p class="commentNote">{{backerItem.createTime |dateFormat}}</p>
                   </div>
               </div>
           </div>
            <div class="right-container" v-if="backerItem.price">
                {{backerItem.price}} USD
            </div>
            <div class="right-container" v-else>
                Private
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    import Constants from "@/env"
    import {saveReply} from "@/api/comment";
    import {mapState, mapMutations} from 'vuex'
    export default {
        name: "BackerItem",
        props: {
            ownerId: '',
            campaignId: '',
            backerItem: {}
        },
        data() {
            return {
                userName: '',
                replyName: '',
                replyContent: ''
            }
        },
        mounted() {
        },
        filters: {
            dateFormat(time) {
                return moment(time).startOf('mimute').fromNow()
            }
        },
        methods: {
            getProfileImage(userId) {

                var realUserId = userId || ""


                if("" == realUserId) {
                    var imagePath = "static/img/default.png"
                }else{
                    // var imagePath = Constants.ICON_HOST + userId
                    var imagePath = this.backerItem.avatar
                }



                return `background-image: url('${imagePath}');background-size: 100% 100%;
                background-repeat: no-repeat;`
            },
            getUserNameById(userId) {

                var that = this

                userId = userId || ""
                if ("" == userId) {
                    that.userName = "Anonymity"
                    return
                }

                var that = this
                this.$store.dispatch('getUserName', userId).then((res) => {
                    that.userName = res.userName
                }).catch((err) => {
                })

            },
            getReplyNameById(userId) {

                var that = this
                this.$store.dispatch('getUserName', userId).then((res) => {
                    that.replyName = res.userName
                }).catch((err) => {
                })

            },
        },
        computed: {
            /*computeUserName() {
                var that = this
                return function (userId) {
                    return that.getUserNameById(userId)
                }
            }*/

            ...mapState({
                'userId': state => state.user.userId,
            }),
        },
    };
</script>

<style lang="scss">
    .backer-item-container {
        border-bottom: 1px solid #dddddd;
        background-color: white;
        padding-bottom: 6px;
        margin-bottom: 16px;
        .backerLayout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left-container {
                .commentLayout-avatar {
                    display: flex;
                    .commentAvatar {
                        width: 40px;
                        height: 40px;
                        margin-right: 26px;
                        border-radius: 25px;
                        -moz-border-radius: 25px;
                        vertical-align: middle;
                    }
                    .commentInfo {
                        text-align: left;
                        .commentLayout-account {
                            color: #E51075;
                            font-family: "benton-sans", "Helvetica", "sans-serif";
                            font-weight: 700;
                            font-size: 14px;
                            line-height: 20px;
                        }
                        .commentNote {
                            color: #a8a8a8;
                            font-family: "benton-sans", "Helvetica", "sans-serif";
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 21px;
                        }
                    }
                }
            }
            .right-container {
                font-family: "benton-sans", "Helvetica", "sans-serif";
                font-size: 16px;
                font-weight: 500;
                line-height: 26px;
                letter-spacing: 0;
                color: #6a6a6a;
                padding-right: 26px;
            }

        }

    }
</style>